<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../bower_components/colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../bower_components/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Captions test</h1>
    <p>look at the first caption!</p>
    <!-- TODO this test could be automated -->
    <div id="customcaptiontest" style="background-color: red;">
        <a href="../photos/8083451788_552becfbc7_b.jpg">
            <img src="../photos/8083451788_552becfbc7_m.jpg" />
            <div class="caption">I'm <span style="color: red">a</span> <strong>custom</strong> caption!
                <div>I'm a div</div>
            </div>
        </a>
        <a href="../photos/7948632554_01f6ae6b6f_b.jpg">
            <img src="../photos/7948632554_01f6ae6b6f_m.jpg" />
        </a>
        <a href="../photos/7002395006_29fdc85f7a_b.jpg" title="ONLY LINK TITLE">
            <img src="../photos/7002395006_29fdc85f7a_m.jpg" />
        </a>
        <a href="../photos/6880502467_d4b3c4b2a8_b.jpg">
            <img alt="ONLY ALT TITLE" src="../photos/6880502467_d4b3c4b2a8_m.jpg" />
        </a>
        <a href="../photos/7302459122_19fa1d8223_b.jpg" title="LINK TITLE">
            <img alt="ALT TITLE" src="../photos/7302459122_19fa1d8223_m.jpg" />
        </a>
        <a href="../photos/7222046648_5bf70e893a_b.jpg" title>
            <img alt src="../photos/7222046648_5bf70e893a_m.jpg" />
        </a>
        <a href="../photos/7062575651_b23918b11a_b.jpg" title="LINK TITLE WITH EMPTY ALT">
            <img alt src="../photos/7062575651_b23918b11a_m.jpg" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../bower_components/jquery/dist/jquery.js"></script>
    <script src="../../bower_components/colorbox/jquery.colorbox.js"></script>
    <script src="../../bower_components/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
    $("#customcaptiontest").justifiedGallery();
    </script>
</body>

</html>
